import React from 'react';
import { Table, Tooltip } from 'antd';

// 多行溢出 CSS 样式（以 2 行为例）
const multiLineOverflowStyle = {
  width: '300px', // 必须与列宽一致
  lineHeight: '1.5', // 行高
  maxHeight: '48px', // 2行 × 行高（1.5×16=24px/行）
  overflow: 'hidden',
  display: '-webkit-box',
  WebkitBoxOrient: 'vertical',
  WebkitLineClamp: 2, // 显示行数
  textOverflow: 'ellipsis', // 末尾显示省略号（可选，单行时有效）
  cursor: 'pointer'
};

const shouldShowTooltip = (text) => {
  if (!text) return [false, 0];
  // 创建参考元素计算文本自然高度（无省略）
  const tempDiv = document.createElement('div');
  tempDiv.style.visibility = 'hidden';
  tempDiv.style.whiteSpace = 'normal'; // 允许换行
  tempDiv.style.width = '300px'; // 与列宽一致
  tempDiv.textContent = text;
  document.body.appendChild(tempDiv);
  const actualHeight = tempDiv.offsetHeight;
  document.body.removeChild(tempDiv);
  // 判断是否超过最大高度（2行，假设行高 1.5）
  const maxHeight = 1.5 * 16 * 2; // 2行 × 行高（16px） × 系数
  return actualHeight > maxHeight
}

const columnRender = (text) => {
  return (
    shouldShowTooltip(text) 
    ? 
      <Tooltip
        title={text}
        placement="top"
        color='pink'
        overlayStyle={{ maxWidth: '400px', wordWrap: 'break-word' }}
      >
        <div style={multiLineOverflowStyle}>{text}</div>
      </Tooltip>
    :
      <div style={multiLineOverflowStyle}>{text}</div>
  );
}
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 300, // 固定列宽，需与 CSS 容器宽度一致
    render: columnRender,
  },
  {
    title: '描述',
    dataIndex: 'description',
    width: 300, // 固定列宽，需与 CSS 容器宽度一致
    render: columnRender,
  },
];
const TableMultiToolTips = () => {

  const data = [
    {
      key: '1',
      name: '张三',
      description: '这是一段需要多行显示的文本，内容超过两行时会自动省略这是第二段内容，用于测试多行溢出和Tooltip效果。',
    },
    {
      key: '2',
      name: '李四',
      description: '简短描述（未超过两行）',
    },
  ];

  return (
    <Table columns={columns} dataSource={data} style={{ width: '100%' }} />
  );
};

export default TableMultiToolTips;